<template>
  <div class="department-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-icon name="arrow-left" class="back-icon" @click="onClickLeft" />
      <div class="title">{{ $t('appointment.title') }}</div>
      <div class="action-icons">
        <van-icon name="ellipsis" class="more-icon" />
        <van-icon name="scan" class="qrcode-icon" />
      </div>
    </div>

    <!-- 搜索框 -->
    <div class="search-container">
      <van-search v-model="searchText" :placeholder="$t('appointment.searchPlaceholder')" shape="round"
        background="transparent" />
    </div>

    <!-- 科室选择区域 -->
    <div class="department-layout">
      <!-- 左侧科室列表 -->
      <div class="department-sider">
        <div v-for="(dept, index) in departments" :key="index"
          :class="['department-item', { 'selected': selectedDept === index }]" @click="selectedDept = index">
          {{ dept.name }}
        </div>
      </div>

      <!-- 右侧子科室列表 -->
      <div class="department-content">
        <div class="sub-title">
          {{ departments[selectedDept].name }}
        </div>
        <div class="sub-list">
          <div v-for="(sub, index) in departments[selectedDept].subs" :key="index" class="sub-item"
            @click="selectSubDepartment(sub)">
            <span>{{ sub }}</span>
            <van-icon name="arrow" class="arrow" />
          </div>
          <div v-if="departments[selectedDept].subs.length === 0" class="empty-tips">
            {{ $t('appointment.noClinic') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const router = useRouter()
const searchText = ref('')
const selectedDept = ref(2)

interface Department {
  name: string
  subs: string[]
}

const departments = ref<Department[]>([
  { name: t('appointment.departments.guoyitang'), subs: [t('appointment.departments.guoyitangSub')] },
  { name: t('appointment.departments.feibingke'), subs: [t('appointment.departments.feibingkeSub1'), t('appointment.departments.feibingkeSub2')] },
  { name: t('appointment.departments.fengshibingke'), subs: [t('appointment.departments.fengshibingkeSub1'), t('appointment.departments.fengshibingkeSub2')] },
  { name: t('appointment.departments.changweibingke'), subs: [t('appointment.departments.changweibingkeSub1'), t('appointment.departments.changweibingkeSub2'), t('appointment.departments.changweibingkeSub3'), t('appointment.departments.changweibingkeSub4'), t('appointment.departments.changweibingkeSub5')] },
  { name: t('appointment.departments.naobingyike'), subs: [t('appointment.departments.naobingyikeSub')] },
  { name: t('appointment.departments.xinbingke'), subs: [t('appointment.departments.xinbingkeSub')] },
  { name: t('appointment.departments.laonianbingke'), subs: [t('appointment.departments.laonianbingkeSub1'), t('appointment.departments.laonianbingkeSub2')] },
  { name: t('appointment.departments.neifenmi'), subs: [t('appointment.departments.neifenmiSub')] },
  { name: t('appointment.departments.shenbingke'), subs: [t('appointment.departments.shenbingkeSub1'), t('appointment.departments.shenbingkeSub2')] },
  { name: t('appointment.departments.ertongyixue'), subs: [t('appointment.departments.ertongyixueSub1'), t('appointment.departments.ertongyixueSub2'), t('appointment.departments.ertongyixueSub3'), t('appointment.departments.ertongyixueSub4'), t('appointment.departments.ertongyixueSub5'), t('appointment.departments.ertongyixueSub6'), t('appointment.departments.ertongyixueSub7'), t('appointment.departments.ertongyixueSub8'), t('appointment.departments.ertongyixueSub9'), t('appointment.departments.ertongyixueSub10')] },
  { name: t('appointment.departments.fuchan'), subs: [t('appointment.departments.fuchanSub1'), t('appointment.departments.fuchanSub2'), t('appointment.departments.fuchanSub3'), t('appointment.departments.fuchanSub4')] },
  { name: t('appointment.departments.ruxianke'), subs: [t('appointment.departments.ruxiankeSub')] },
  { name: t('appointment.departments.gangchangke'), subs: [t('appointment.departments.gangchangkeSub')] },
  { name: t('appointment.departments.pifuke'), subs: [t('appointment.departments.pifukeSub1'), t('appointment.departments.pifukeSub2'), t('appointment.departments.pifukeSub3'), t('appointment.departments.pifukeSub4')] },
  { name: t('appointment.departments.zhongliuke'), subs: [t('appointment.departments.zhongliukeSub1'), t('appointment.departments.zhongliukeSub2'), t('appointment.departments.zhongliukeSub3'), t('appointment.departments.zhongliukeSub4'), t('appointment.departments.zhongliukeSub5'), t('appointment.departments.zhongliukeSub6'), t('appointment.departments.zhongliukeSub7'), t('appointment.departments.zhongliukeSub8'), t('appointment.departments.zhongliukeSub9'), t('appointment.departments.zhongliukeSub10'), t('appointment.departments.zhongliukeSub11'), t('appointment.departments.zhongliukeSub12'), t('appointment.departments.zhongliukeSub13')] },
  { name: t('appointment.departments.xueyeke'), subs: [t('appointment.departments.xueyekeSub1'), t('appointment.departments.xueyekeSub2'), t('appointment.departments.xueyekeSub3'), t('appointment.departments.xueyekeSub4')] },
  { name: t('appointment.departments.zhongyike'), subs: [t('appointment.departments.zhongyikeSub1'), t('appointment.departments.zhongyikeSub2'), t('appointment.departments.zhongyikeSub3'), t('appointment.departments.zhongyikeSub4'), t('appointment.departments.zhongyikeSub5'), t('appointment.departments.zhongyikeSub6'), t('appointment.departments.zhongyikeSub7'), t('appointment.departments.zhongyikeSub8'), t('appointment.departments.zhongyikeSub9'), t('appointment.departments.zhongyikeSub10'), t('appointment.departments.zhongyikeSub11'), t('appointment.departments.zhongyikeSub12'), t('appointment.departments.zhongyikeSub13'), t('appointment.departments.zhongyikeSub14'), t('appointment.departments.zhongyikeSub15')] },
  { name: t('appointment.departments.kangfuke'), subs: [t('appointment.departments.kangfukeSub1'), t('appointment.departments.kangfukeSub2'), t('appointment.departments.kangfukeSub3'), t('appointment.departments.kangfukeSub4'), t('appointment.departments.kangfukeSub5'), t('appointment.departments.kangfukeSub6'), t('appointment.departments.kangfukeSub7')] },
  { name: t('appointment.departments.zhenjiuke'), subs: [t('appointment.departments.zhenjiukeSub1'), t('appointment.departments.zhenjiukeSub2'), t('appointment.departments.zhenjiukeSub3'), t('appointment.departments.zhenjiukeSub4'), t('appointment.departments.zhenjiukeSub5')] },
  { name: t('appointment.departments.nanxingke'), subs: [t('appointment.departments.nanxingkeSub')] },
])

const onClickLeft = () => {
  router.back()
}

const selectSubDepartment = (subDept: string) => {
  // showToast(`选择了${subDept}`)
  // 这里可以处理挂号逻辑
  router.push({
    path: '/appointment-detail',
    query: {
      subDept: subDept
    }
  })
}
</script>

<style lang="scss" scoped>
.department-container {
  background: #f7f9fa;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.back-icon {
  font-size: 24px;
  color: #333;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.action-icons {
  display: flex;
  align-items: center;
}

.more-icon,
.qrcode-icon {
  font-size: 24px;
  margin-left: 16px;
  color: #333;
}

.search-container {
  padding: 8px 16px;
  background: #fff;
}

.department-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.department-sider {
  width: 180px;
  background: #fff;
  overflow-y: auto;
  border-right: 1px solid #eee;
}

.department-item {
  padding: 16px 12px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  line-height: 1.5;
}

.department-item.selected {
  background: #e6f0ff;
  color: #4080ff;
  border-left: 4px solid #4080ff;
}

.department-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.sub-title {
  font-size: 16px;
  margin-bottom: 16px;
  color: #666;
}

.sub-list {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.sub-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
}

.arrow {
  color: #ccc;
}

.empty-tips {
  padding: 30px 0;
  text-align: center;
  color: #999;
}
</style>